<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions">
	<h:form id="aggregation-form">
		<p:dialog id="aggregation-config" header="#{msg['title.aggregation']}"
			widgetVar="aggregationConfig" modal="true" width="730" height="305"
			closable="true" resizable="false" dynamic="true"
			styleClass="aggregation-config" showEffect="fade" hideEffect="fade">
			<p:tabView id="aggregator-tab" widgetVar="aggregatorTab">
				<p:tab id="tab-grand"
					title="#{msg['label.aggregation.position.grand']}">
					<p:panel styleClass="rows-panel">
						<f:facet name="header">
							<h:panelGroup layout="block">
								<h:panelGroup styleClass="ui-icon ui-icon-title ui-icon-rows" />
								<h:outputText value="#{msg['label.rows']}" />
							</h:panelGroup>
						</f:facet>
						<p:pickList value="#{aggregationHandler.rowAggregators}"
							var="aggregator" itemValue="#{aggregator.value}"
							converter="aggregatorConverter" itemLabel="#{aggregator.label}"
							showTargetControls="true" showCheckbox="false"
							addLabel="#{msg['button.add']}"
							addAllLabel="#{msg['button.addAll']}"
							removeLabel="#{msg['button.remove']}"
							removeAllLabel="#{msg['button.removeAll']}"
							moveUpLabel="#{msg['button.up']}"
							moveDownLabel="#{msg['button.down']}">
							<f:facet name="sourceCaption">
								<h:outputText value="#{msg['label.picklist.available']}" />
							</f:facet>

							<f:facet name="targetCaption">
								<h:outputText value="#{msg['label.picklist.selected']}" />
							</f:facet>

							<p:column>
								<h:outputText value="#{aggregator.label}" />
							</p:column>
						</p:pickList>
					</p:panel>
					<p:panel styleClass="columns-panel">
						<f:facet name="header">
							<h:panelGroup layout="block">
								<h:panelGroup styleClass="ui-icon ui-icon-title ui-icon-cols" />
								<h:outputText value="#{msg['label.columns']}" />
							</h:panelGroup>
						</f:facet>
						<p:pickList value="#{aggregationHandler.columnAggregators}"
							var="aggregator" itemValue="#{aggregator.value}"
							converter="aggregatorConverter" itemLabel="#{aggregator.label}"
							showTargetControls="true" showCheckbox="false"
							addLabel="#{msg['button.add']}"
							addAllLabel="#{msg['button.addAll']}"
							removeLabel="#{msg['button.remove']}"
							removeAllLabel="#{msg['button.removeAll']}"
							moveUpLabel="#{msg['button.up']}"
							moveDownLabel="#{msg['button.down']}">
							<f:facet name="sourceCaption">
								<h:outputText value="#{msg['label.picklist.available']}" />
							</f:facet>

							<f:facet name="targetCaption">
								<h:outputText value="#{msg['label.picklist.selected']}" />
							</f:facet>

							<p:column>
								<h:outputText value="#{aggregator.label}" />
							</p:column>
						</p:pickList>
					</p:panel>
				</p:tab>

				<p:tab id="tab-hierarchy"
					title="#{msg['label.aggregation.position.hierarchy']}">
					<p:panel styleClass="rows-panel">
						<f:facet name="header">
							<h:panelGroup layout="block">
								<h:panelGroup styleClass="ui-icon ui-icon-title ui-icon-rows" />
								<h:outputText value="#{msg['label.rows']}" />
							</h:panelGroup>
						</f:facet>
						<p:pickList value="#{aggregationHandler.rowHierarchyAggregators}"
							var="aggregator" itemValue="#{aggregator.value}"
							converter="aggregatorConverter" itemLabel="#{aggregator.label}"
							showTargetControls="true" showCheckbox="false"
							addLabel="#{msg['button.add']}"
							addAllLabel="#{msg['button.addAll']}"
							removeLabel="#{msg['button.remove']}"
							removeAllLabel="#{msg['button.removeAll']}"
							moveUpLabel="#{msg['button.up']}"
							moveDownLabel="#{msg['button.down']}">
							<f:facet name="sourceCaption">
								<h:outputText value="#{msg['label.picklist.available']}" />
							</f:facet>

							<f:facet name="targetCaption">
								<h:outputText value="#{msg['label.picklist.selected']}" />
							</f:facet>

							<p:column>
								<h:outputText value="#{aggregator.label}" />
							</p:column>
						</p:pickList>
					</p:panel>
					<p:panel styleClass="columns-panel">
						<f:facet name="header">
							<h:panelGroup layout="block">
								<h:panelGroup styleClass="ui-icon ui-icon-title ui-icon-cols" />
								<h:outputText value="#{msg['label.columns']}" />
							</h:panelGroup>
						</f:facet>
						<p:pickList
							value="#{aggregationHandler.columnHierarchyAggregators}"
							var="aggregator" itemValue="#{aggregator.value}"
							converter="aggregatorConverter" itemLabel="#{aggregator.label}"
							showTargetControls="true" showCheckbox="false"
							addLabel="#{msg['button.add']}"
							addAllLabel="#{msg['button.addAll']}"
							removeLabel="#{msg['button.remove']}"
							removeAllLabel="#{msg['button.removeAll']}"
							moveUpLabel="#{msg['button.up']}"
							moveDownLabel="#{msg['button.down']}">
							<f:facet name="sourceCaption">
								<h:outputText value="#{msg['label.picklist.available']}" />
							</f:facet>

							<f:facet name="targetCaption">
								<h:outputText value="#{msg['label.picklist.selected']}" />
							</f:facet>

							<p:column>
								<h:outputText value="#{aggregator.label}" />
							</p:column>
						</p:pickList>
					</p:panel>
				</p:tab>

				<p:tab id="tab-member"
					title="#{msg['label.aggregation.position.member']}">
					<p:panel styleClass="rows-panel">
						<f:facet name="header">
							<h:panelGroup layout="block">
								<h:panelGroup styleClass="ui-icon ui-icon-title ui-icon-rows" />
								<h:outputText value="#{msg['label.rows']}" />
							</h:panelGroup>
						</f:facet>
						<p:pickList value="#{aggregationHandler.rowMemberAggregators}"
							var="aggregator" itemValue="#{aggregator.value}"
							converter="aggregatorConverter" itemLabel="#{aggregator.label}"
							showTargetControls="true" showCheckbox="false"
							addLabel="#{msg['button.add']}"
							addAllLabel="#{msg['button.addAll']}"
							removeLabel="#{msg['button.remove']}"
							removeAllLabel="#{msg['button.removeAll']}"
							moveUpLabel="#{msg['button.up']}"
							moveDownLabel="#{msg['button.down']}">
							<f:facet name="sourceCaption">
								<h:outputText value="#{msg['label.picklist.available']}" />
							</f:facet>

							<f:facet name="targetCaption">
								<h:outputText value="#{msg['label.picklist.selected']}" />
							</f:facet>

							<p:column>
								<h:outputText value="#{aggregator.label}" />
							</p:column>
						</p:pickList>
					</p:panel>
					<p:panel styleClass="columns-panel">
						<f:facet name="header">
							<h:panelGroup layout="block">
								<h:panelGroup styleClass="ui-icon ui-icon-title ui-icon-cols" />
								<h:outputText value="#{msg['label.columns']}" />
							</h:panelGroup>
						</f:facet>
						<p:pickList value="#{aggregationHandler.columnMemberAggregators}"
							var="aggregator" itemValue="#{aggregator.value}"
							converter="aggregatorConverter" itemLabel="#{aggregator.label}"
							showTargetControls="true" showCheckbox="false"
							addLabel="#{msg['button.add']}"
							addAllLabel="#{msg['button.addAll']}"
							removeLabel="#{msg['button.remove']}"
							removeAllLabel="#{msg['button.removeAll']}"
							moveUpLabel="#{msg['button.up']}"
							moveDownLabel="#{msg['button.down']}">
							<f:facet name="sourceCaption">
								<h:outputText value="#{msg['label.picklist.available']}" />
							</f:facet>

							<f:facet name="targetCaption">
								<h:outputText value="#{msg['label.picklist.selected']}" />
							</f:facet>

							<p:column>
								<h:outputText value="#{aggregator.label}" />
							</p:column>
						</p:pickList>
					</p:panel>
				</p:tab>
			</p:tabView>

			<f:facet name="footer">
				<h:panelGroup id="button-bar" styleClass="ui-dialog-buttonpane"
					layout="block">
					<p:messages showDetail="true" closable="true" />

					<p:commandButton value="#{msg['button.ok']}" icon="ui-icon-check"
						action="#{aggregationHandler.apply}"
						update=":grid-form,:editor-form:mdx-editor"
						onstart="PF('aggregatorTab').select(0);"
						onsuccess="onViewChanged(); PF('aggregationConfig').hide();" />
					<p:commandButton value="#{msg['button.apply']}"
						icon="ui-icon-check" action="#{aggregationHandler.apply}"
						update=":grid-form,:editor-form:mdx-editor"
						oncomplete="onViewChanged()" />
					<p:commandButton value="#{msg['button.close']}"
						icon="ui-icon-close"
						onclick="PF('aggregatorTab').select(0); PF('aggregationConfig').hide(); return false;" />
				</h:panelGroup>
			</f:facet>
		</p:dialog>
	</h:form>
</ui:composition>
